<template>
  <div class="container">
    <!--面包屑导航-->
    <Breadcrumb :items="['menu.system', '菜单管理']" />
    <header-query
      :config="queryConfig"
      @search="search"
      @reset="reset"
    />
    <a-card class="general-card">
      <header-operator
        :operators="headerOperators"
        :columns="tableColumns"
        @operator="operator"
        @refresh="fetchData"
        @density="(value) => {size = value}"
        @column="(value) => cloneColumns = value"
      />
      <!--列表-->
      <a-table
        v-if="tableData.length > 0"
        row-key="deptId"
        :size="size"
        :bordered="{cell:true}"
        :loading="loading"
        :columns="cloneColumns"
        :pagination="false"
        :default-expand-all-rows="true"
        :data="tableData"
      >

        <template #status="{ record }">
          <a-tag v-if="record.status=== '0'" color="arcoblue">正常</a-tag>
          <a-tag v-if="record.status=== '1'" color="gray">冻结</a-tag>
        </template>

        <template #operations="{ record }">
          <column-operator
            :btn-size="size"
            :config="columnOperators"
            :record="record"
            @record-operator="recordOperator"
          />
        </template>
      </a-table>
      <a-empty v-else />
    </a-card>

    <dialog-add ref="dialogAddRef" @submit="fetchData" />

  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { Query } from '@/api/common/query';
import { deptList, deleteDept, SysDept } from '@/api/system/dept';
import { Message, Modal } from '@arco-design/web-vue';
import { queryConfig, headerOperators, tableColumns, columnOperators } from '@/views/system/dept/config';
import cloneDeep from 'lodash/cloneDeep';
import useLoading from '@/hooks/loading';
import DialogAdd from '@/views/system/dept/dialog/dialog-add.vue';

const { loading, setLoading } = useLoading(true);

const queryParams = ref();

const size = ref('medium');

const tableData = ref<SysDept[]>([]);

const cloneColumns = ref<any>([]);

const fetchData = async () => {
  const params = {
    page: {},
    query: queryParams.value
  };
  setLoading(true);
  try {
    const { data } = await deptList(params as Query<SysDept>);
    tableData.value = data || [];
  } finally {
    setLoading(false);
  }
};

const search = (value: SysDept) => {
  queryParams.value = value;
  fetchData();
};

const reset = () => {
  queryParams.value = {};
  fetchData();
};

const dialogAddRef = ref();

const operator = (value: string) => {
  console.log('operator', value);
  if (value === 'add') {
    dialogAddRef.value.open(null, false);
  }
};

const recordOperator = (value: string, record: SysDept, setLoading: any) => {
  if (value === 'add') {
    dialogAddRef.value.open({ 'parentId': record.deptId }, true);
  }
  if (value === 'delete') {
    const deptId = record.deptId || '';
    Modal.warning({
      title: `确定删除部门【${record.deptName}】`,
      content: '若菜单有下级部门,则级联删除',
      simple: false,
      hideCancel: false,
      cancelText: '取消',
      onOk: () => {
        deleteDept(deptId).then(() => {
          Message.info('删除成功');
          fetchData();
        });
      }
    });
  }
  if (value === 'detail') {
    dialogAddRef.value.open(record, true);
  }
};

onMounted(() => {
  fetchData();
});

watch(
  () => tableColumns.value,
  (val) => {
    cloneColumns.value = cloneDeep(val);
    cloneColumns.value.forEach((item: { checked: boolean; }, index: any) => {
      item.checked = true;
    });
  },
  { deep: true, immediate: true }
);
</script>

<script lang="ts">
export default {
  name: 'SysDept'
};
</script>

<style scoped lang="less">
@import "/src/components/table/common";
</style>
